@model com.msung.application.Service.Crud.Dto.Response.PagedResultDto<com.msung.application.Service.TableNames.Dto.TableNameDto>
@{
    ViewBag.Title = "用户";
    ViewBag.Small = "用户列表";
}

<div class="row" id="TableSpaceTableNameIndex">
    <div class="col-md-12">
        <!-- BEGIN EXAMPLE TABLE PORTLET-->
        <div class="portlet light bordered">
            <div class="portlet-title">
                <div class="caption font-dark">
                    <i class="icon-settings font-dark"></i>
                    <span class="caption-subject bold uppercase">Row Reordering</span>
                </div>
                <div class="tools"> </div>
            </div>
            <div class="portlet-body">
                <div id="sample_1_wrapper" class="dataTables_wrapper no-footer">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="dt-buttons">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 col-sm-12">
                        </div>
                        <div class="col-md-6 col-sm-12">
                            <div id="sample_1_filter" class="dataTables_filter">
                                <!--
                                <label>
                                    EPC	:<input type="search" v-on:change="changeitem()" class="form-control input-sm input-small input-inline" placeholder="" id="EPC" name="EPC" aria-controls="sample_1">
                                </label>
                                <label>
                                    TID	:<input type="search" v-on:change="changeitem()" class="form-control input-sm input-small input-inline" placeholder="" id="TID" name="TID" aria-controls="sample_1">
                                </label>
                                <button type="button" v-on:click="getDataRows()" class="dt-button buttons-csv buttons-html5 btn purple btn-outline" tabindex="0" aria-controls="sample_1" >
                                    <span>查询</span>
                                </button>
                                -->
                            </div>
                        </div>
                    </div>
                    <div class="table-scrollable">
                        <table class="table table-striped table-bordered table-hover dataTable no-footer" id="sample_1" role="grid" aria-describedby="sample_1_info" style="position: relative;">
                            <thead>
                                <tr role="row">
                                    <th v-for="item in headers" :key="item.SortId" class="sorting" tabindex="0" aria-controls="sample_1" rowspan="1" colspan="1" style="width: 246px;"> {{item.ShowName}} </th>
                                    <th aria-controls="sample_1" rowspan="1" colspan="1" style="width: 246px;">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr role="row" class="odd" v-for="item in tabledata.Items" :key="item.Id">
                                    <td v-for="head in headers"> {{item[head.PropertyName]}} </td>
                                    <td>
                                        <a class="fancybox fancybox.iframe" title="" :href="'/TableSpace/TableName/Edit/'+item.Id">
                                            修改
                                        </a>
                                        <a href="javascript:;" v-on:click="remove(item.Id)">删除</a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="row" v-html="tabledata.PagedInput.PageTableFoot.Foot">
                    </div>
                </div>
            </div>
        </div>
        <!-- END EXAMPLE TABLE PORTLET-->
    </div>
</div>

@section scripts{
   <script type="text/javascript">
       var currentTableSpaceTableNameIndexVm = new Vue({
           el: '#TableSpaceTableNameIndex',
           data: {
               headers:[],
               tabledata: {
                   PagedInput: {
                       PageIndex: 1,
                       headers: [],
                       EPC: "",
                       TID: "",
                       PageTableFoot: {
                           Foot: ""
                       }
                   }
               }
           },
           mounted: function () {
               var that = this;

               that.getShowHeaders();
               that.getDataRows();

               $("body").on("click", "div.paging_bootstrap_number ul.pagination li a", function () {
                   that.tabledata.PagedInput.PageIndex = this.attributes.pageindex.value;
                   that.getDataRows();
               })
           },
           methods: {
               remove: function (id) {
                   var that = this;
                   $.ajax({
                       type: "post",
                       url: "/TableSpace/TableName/Delete/"+id,
                       dataType: "json",
                       success: function (data) {
                           that.getDataRows();
                       }
                   })
               },
               getShowHeaders: function () {
                   var that = this;
                   $.ajax({
                       type: "post",
                       url: "/TableSpace/TableName/GetShowHeaders",
                       data: { IsCheckDisabled : true },
                       dataType: "json",
                       success: function (data) {
                           that.headers = data;
                       }
                   })
               },
               changeitem: function () {
                   this.tabledata.PagedInput.PageIndex = 1;
               },
               getDataRows: function () {
                   var that = this;

                   //that.tabledata.PagedInput.EPC = $("#EPC").val();
                   //that.tabledata.PagedInput.TID = $("#TID").val();

                   $.ajax({
                       type: "post",
                       url: "/TableSpace/TableName/GetDatas",
                       data: that.tabledata.PagedInput ,
                       dataType: "json",
                       success: function (data) {
                           that.tabledata = data;
                       }
                   })
               }
           }
       })
   </script>
}